import { useState } from 'react';

import { ReactComponent as Chevron } from '@/assets/images/shared/icon-chevron.svg';
import { TabProps } from '@/shared/interfaces';
import cn from 'classnames';

import cs from './TabsWithoutModal.module.scss';

export const TabsWithoutModal = ({
  tabs,
  headerClassName,
  className,
}: {
  tabs: TabProps[];
  headerClassName?: string;
  className?: string;
}) => {
  const tabsWithValidData = tabs?.filter((tab) => tab.data !== null);

  const [currentTab, setCurrentTab] = useState<TabProps | undefined>(
    tabsWithValidData?.length > 0 ? tabsWithValidData[0] : tabs?.[0],
  );
  const handleClick = (tab: TabProps) => {
    setCurrentTab(() => tab);
  };
  if (!tabs.length) {
    return <></>;
  }
  return (
    <>
      <div className={cn(cs.tabs, className)}>
        <div className={cn(cs.tabs_header, tabs.filter((item) => !item.data) && cs.disabledHeader, headerClassName)}>
          {tabs.map((tab) => (
            <button
              className={cn(cs.tab, currentTab?.id === tab.id && cs.active, !tab.data && cs.disabledTab)}
              disabled={!tab.data}
              key={tab.id}
              onClick={() => handleClick(tab)}
              type="button"
            >
              <div>{tab.title}</div>
              <div className={cs.mobile_arrow}>
                <Chevron />
              </div>
            </button>
          ))}
        </div>
        <div className={cs.content}>{currentTab?.data}</div>
      </div>
    </>
  );
};
